<template>
  <!-- 短信管家 智能卡位 接收的 验证码 -->
  <div class="app-container ">
    <el-tabs type="border-card" v-model="actived" @tab-click="tabChange" v-loading="loading">
      <el-tab-pane label="接收的短信" name="jieshoude">
        <div class="" >
          <el-form :model="queryParams" ref="queryForm" :inline="true" class=" search-form-new" label-width="80px">
            <el-form-item label="卡位类型" prop="dataType">
              <el-select v-model="queryParams.dataType" placeholder="请选择" @change="search">
                <el-option label="我的卡位" :value="1" />
                <el-option label="我管理的" :value="2" v-if="checkPermi(['phoneManage:chuzude'])" />
              </el-select>
            </el-form-item>

            <el-form-item label="时间" prop="timer">
              <el-date-picker clearable v-model="timer" type="daterange" range-separator="至" value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="queryParams.phone" placeholder="请输入手机号" clearable size="small" />
            </el-form-item>
            <el-form-item  label-width="100px" prop="duoPhone">
              <div slot="label">
                <el-tooltip placement="right-start">
                  <template slot="content">
                    <div style="color:#f3f3f3;font-size: 15px;">
                      <span>保存了两个手机号的短信记录，在此输入手机号进行查询。</span>
                    </div>
                  </template>
                  <span style="margin-right:5px;" class="el-icon-question"></span>
                </el-tooltip>
                <b>多手机号</b>
              </div>
              <el-input v-model="queryParams.duoPhone" placeholder="请输入手机号" clearable size="small" />
            </el-form-item>
            <el-form-item class="btns">
              <el-button type="primary" icon="el-icon-search" @click="search" class="zdy-btn">搜索</el-button>
              <!-- <el-button type="warning" icon="el-icon-download" @click="showQrcode" class="zdy-btn">下载短信管家APP</el-button> -->
            </el-form-item>
          </el-form>
          <!-- <div class="tips">
            提示：使用本功能接收验证码，需要下载“短信管家-互联”APP配合使用，请在手机上运行“短信管家-互联”，并将APP加入后台活动/允许后台高耗电。
          </div> -->
          <div class="table_box table_box_new">
            <el-table border stripe :data="tableData.records">
              <!-- <el-table-column prop="id" label="序号" width="80"></el-table-column> -->
              <el-table-column prop="zulinTenantName" label="使用方" width="200" v-if="queryParams.dataType==2"></el-table-column>
              <el-table-column prop="phone" label="卡位号码" width="150"></el-table-column>
              <el-table-column prop="fromNumber" label="发送方" width="150"></el-table-column>
              <el-table-column prop="createTime" label="时间" width="200"></el-table-column>
              <el-table-column prop="" label="卡位类型" width="150">
                <template slot-scope="scope">
                  <el-tag v-if="scope.row.type==1" type="success">短信管家</el-tag>
                  <el-tag v-if="scope.row.type==2" type="warning">智能卡位</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="content" label="短信内容">
                <template slot-scope="scope">
                  <span v-if="scope.row.content&&scope.row.content=='hide'">
                    短信内容已隐藏， <span class='link' @click="openSmsContent(scope.row)">点击查看</span>
                  </span>
                  <span v-else>{{ scope.row.content  }}</span>
                </template>
              </el-table-column>
            </el-table>
            <pagination v-show="tableData.total > 0" :total="tableData.total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane v-if="checkPermi(['sendMSMlist'])" label="发送的短信" name="fasongde">
        <sendSmsRecords></sendSmsRecords>
      </el-tab-pane>
      <el-tab-pane v-if="checkPermi(['kaweifenxiang'])" label="我的分享" name="fenxiang">
        <fenxiang></fenxiang>
      </el-tab-pane>
      <el-tab-pane v-if="checkPermi(['smsLookRecList'])"  label="短信查看记录" name="lookRec">
        <smsLookRec ref="smsLookRec"></smsLookRec>
      </el-tab-pane>
    </el-tabs>

    <!--短信管家下载 -->
    <!-- <el-dialog title="短信管家下载" :visible.sync="qrCodeShow" width="620px">
      <div class="tips" style="text-align:center">仅支持安卓手机。</div>
      <div class="tips" style="text-align:center">请使用手机浏览器扫码，或在浏览器中打开此链接进行下载。</div>
      <div ref="qrcode" style="width:300px; height:300px;margin:0 auto;margin-bottom:15px"></div>
      <div class="link-box">
        <div class="">
          <span class="mylink"> <a :href="downloadUrl.download.dictValue" target="_blank">{{downloadUrl.download.dictValue}}</a></span>
          <el-button size="mini" @click="copy(downloadUrl.download.dictValue)">复制</el-button>
        </div>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import phoneApi from "@/api/phoneManage";
import QRCode from "qrcodejs2";
import sendSmsRecords from "./sendSmsRecords.vue";
import fenxiang from "../phoneManage/fenxiang/index.vue";
import smsLookRec from "./smsLookRec.vue";
export default {
  name: "AppMessagelist",
  components: { sendSmsRecords, fenxiang,smsLookRec },
  data() {
    return {
      actived: "jieshoude",
      timer: [],
      tableData: {
        records: [],
        total: 0,
      },
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dataType: 1,
      },
      downloadUrl: {
        download: {},
      },
      qrCodeShow: false,
      qrcode: null,
    };
  },
  created() {
    this.getDownloadUrl();
    this.getList();
  },
  activated() {},
  methods: {
    // 展示短信内容
    openSmsContent(msmObj){
      if(msmObj.content=='hide'){
        // 查询短信内容并展示
        phoneApi
        .getSmsContent(msmObj.id).then(res=>{
          if(res.data){
            msmObj.content = res.data.content
          //   let regex = /\d+/g;
          //   const escapedString = this.escapeHtml(res.data.content);
          //  let code = `<span style="color:teal">${escapedString}</span>`;
          //   code = code.replace(regex, (str) => {
          //     return `<b style="color:red;font-size:20px;">${str}</b>`;
          //   });
          //   if (code.indexOf("&amp;&amp;&amp;") > -1) {
          //     const dianliang = `<b style="color:#6c5dd3;">${
          //       code.split("&amp;&amp;&amp;")[1]
          //     }</b>`;
          //     code = code.split("&amp;&amp;&amp;")[0] + dianliang;
          //   }
          //   this.$alert(code,"卡位号码：" +msmObj.phone ,{
          //     dangerouslyUseHTMLString: true
          //   })
          }
        })
      }
    },
     // 替换短信内容的特殊字符
     escapeHtml(unsafe) {
      return unsafe.replace(/[&<>"']/g, function (match) {
        return {
          "&": "&amp;",
          "<": "&lt;",
          ">": "&gt;",
          '"': "&quot;",
          "'": "&#39;",
        }[match];
      });
    },
    tabChange(val) {
      this.actived = val.name;
    },
    // 获取APP短信管家下载地址
    getDownloadUrl() {
      this.getDicts("dxgjxz").then((res) => {
        if (res.data && res.data.length) {
          this.downloadUrl = this.arrayToObject(res.data, "dictLabel");
        }
      });
    },
    // 获取列表
    getList() {
      this.loading = true;
      if (this.timer && this.timer.length) {
        this.queryParams.createTimeStart = this.timer[0] + " 00:00:00";
        this.queryParams.createTimeEnd = this.timer[1] + " 23:59:59";
      } else {
        this.queryParams.createTimeStart = "";
        this.queryParams.createTimeEnd = "";
      }
      phoneApi
        .appMessagelist(this.queryParams)
        .then((response) => {
          this.tableData.records = response.rows;
          this.tableData.total = response.total;
          this.loading = false;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    copy(txt) {
      this.$copyText(txt).then((res) => {
        this.$message.success("已复制到剪切板");
      });
    },
    // 弹出下载APP弹窗
    showQrcode() {
      this.openQRCode();
    },
    // 生成二维码 选号网
    openQRCode() {
      this.qrCodeShow = true;
      this.$nextTick(() => {
        if (this.qrcode != null) {
          this.qrcode.clear(); // 清除代码
        } else {
          this.qrcode = new QRCode(this.$refs.qrcode, {
            width: 300,
            height: 300,
            correctLevel: QRCode.CorrectLevel.L,
          });
          //生成二维码
          this.qrcode.makeCode(this.downloadUrl["download"].dictValue);
        }
      });
    },
    // 搜索
    search() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    //重置
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        dataType: 1,
      };
      this.timer = [];
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  padding: 0;
}
.tips {
  font-size: 16px;
  margin-bottom: 10px;
  color: red;
}
.link-box {
  > div {
    text-align: center;
    margin-bottom: 10px;
  }
  .mylink {
    margin-right: 10px;
    a {
      color: $primary;
    }
  }
}
</style>